<!--
 * @Descripttion: 
 * @LastEditors: xzh
 * @LastEditTime: 2023-09-14 20:16:24
-->
<template>
  <el-tooltip
    :effect="effect"
    :content="content"
    :placement="placement"
    :trigger="trigger"
    :disabled="!tooltipDisabled"
  >
    <div
      :class="['over-flow', customClass]"
      :style="{ maxWidth: width }"
      ref="overFlowRef"
      @mouseenter="visibleChange($event)"
    >
      <span v-if="!useSlots().customContent">{{ content }}</span>
      <slot name="customContent" v-else />
    </div>
  </el-tooltip>
</template>

<script setup lang="ts">
import { definePropType } from "@/utils/typings/index.type";
import { TooltipTriggerType, dropdownProps } from "element-plus";
import { ref, reactive, useSlots } from "vue";
const emit = defineEmits([]);
const props = defineProps({
  // 主题->dark/light
  effect: {
    type: String,
    requited: false,
    default: "dark",
  },
  //出现的位置
  placement: dropdownProps.placement,
  //显示的内容
  content: {
    type: String,
    requited: false,
    default: "",
  },
  //触发方式
  trigger: {
    type: definePropType<Array<TooltipTriggerType>>([String, Array]),
    default: "hover",
  },
  customClass: {
    type: String,
    requited: false,
    default: "",
  },
  width: {
    type: String,
    requited: false,
    default: "auto",
  },
});
/**
 * @Author: xzh
 * @Descripttion:是否禁用
 * @Param:
 */
let tooltipDisabled = ref<boolean>(true);
/**
 * @Author: xzh
 * @Descripttion:控制tooltip显示
 * @Param:
 */
let visibleChange = (event: any) => {
  //文本实际宽度
  let { scrollWidth, offsetWidth, clientWidth: contentWidth } = event.target;
  //文本容器宽度
  // let contentWidth = this.$refs.overFlowRef.clientWidth
  //文本实际宽度 > 文本容器宽度 ->内容溢出,显示...
  tooltipDisabled.value = (scrollWidth || offsetWidth) > contentWidth;
};
</script>
<style lang="scss" scoped>
.over-flow {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  word-break: break-all; //英文数字折行
}
</style>
